<template>
    <div class="publicpageview">

        <div class="publicformview">
            <el-form :inline="true" :model="listQuery" size="mini" ref="searchForm" label-width="100px">
                <el-row :gutter="20">
                    <el-col :span="4">
                        <el-form-item label="区域：" prop="areaId">
                            <el-select v-model="listQuery.areaId" clearable @change="handleQuchange">
                                <el-option v-for="item in areaList" :label="item.dname" :value="item.did"
                                    :key="item.did"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4">
                        <el-form-item label="部门：" prop="deptId">
                            <el-select v-model="listQuery.deptId" clearable>
                                <el-option v-for="item in houseAdminList" :label="item.aname" :value="item.aid"
                                    :key="item.aid"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>


                    <el-col :span="8">
                        <el-form-item label="日期：" prop="value">
                            <el-date-picker v-model="listQuery.querytime" type="datetimerange" clearable range-separator="-"
                                            value-format="yyyy-MM-dd" format="yyyy-MM-dd"
                                start-placeholder="年/月/日" end-placeholder="年/月/日">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>


<!--                    <el-col :span="4">-->
<!--                        <div style="padding-left: 90px;">-->
<!--                            <el-button size="mini" type="primary" @click="handleSearch">查询</el-button>-->
<!--                            <el-button size="mini" @click="resetForm('searchForm')">重置</el-button>-->
<!--                        </div>-->
<!--                    </el-col>-->
                </el-row>
            </el-form>
        </div>

        <div class="publitableview">

            <el-button type="text">对账业务清单</el-button>
          <el-button type="primary" icon="el-icon-download" @click="showdata1">数据导入（POS）</el-button>
          <el-button type="primary" icon="el-icon-download" @click="showdata2">数据导入（微信/公众号）</el-button>
          <el-button type="primary" icon="el-icon-download" @click="showdata3">数据导入（银行DSFZ）</el-button>
          <el-button type="primary" icon="el-icon-download" @click="showdata4">数据导入（银行FGY）</el-button>
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column label="全选" prop="name">

                </el-table-column>
            </el-table>
            <el-button type="primary" style="margin-top: 20px;" @click="checkorderlist">对 账</el-button>

        </div>


      <el-dialog title="对账明细" :visible.sync="showduizhang" width="1500px" append-to-body>
        <el-table v-loading="loading1" :data="orderlist" >
                          <el-table-column align="center" label="账单名称" prop="orderName" label-width="400"/>
                        <el-table-column align="center" label="财务数据" prop="cwPrice"/>
                          <el-table-column align="center" label="经营数据" prop="jyPrice"/>
                          <el-table-column align="center" label="相差数额" prop="xcPrice"/>
        </el-table>
      </el-dialog>

      <el-dialog title="POS数据导入" :visible.sync="showpos" width="1500px" append-to-body>
        <ImportPOS/>
      </el-dialog>
      <el-dialog title="微信/公众号 数据导入" :visible.sync="showwx" width="1500px" append-to-body>
        <ImportWX/>
      </el-dialog>
      <el-dialog title="银行 数据导入" :visible.sync="showbank1" width="1500px" append-to-body>
        <ImportBANK1/>
      </el-dialog>
      <el-dialog title="银行 数据导入" :visible.sync="showbank2" width="1500px" append-to-body>
        <ImportBANK2/>
      </el-dialog>


    </div>
</template>

<script>

import { listAll, createPlanYear, updatePlanYear, deletePlanYear, backPlanYear, reportPlanYear } from '@/api/repair'
import { getArea, getHouseAdmin, getBlockGroup, getBlockByGroup, upload } from '@/api/common'
import { Message } from 'element-ui'
import moment from 'moment';
import {listCwCredentialsLog, listCwCredentialsLog2} from "@/api/caiwu/CwCredentialsLog";

import ImportBANK1 from "@/views/finance/pinzhengchuli/bankpingzheng/ImportBANK1";
import ImportBANK2 from "@/views/finance/pinzhengchuli/bankpingzheng/ImportBANK2";
import ImportPOS from "@/views/finance/pinzhengchuli/bankpingzheng/ImportPOS";
import ImportWX from "@/views/finance/pinzhengchuli/bankpingzheng/ImportWX";
export default {
    name: "AccommodationManagementIndex",
    components:{ImportPOS,ImportWX,ImportBANK1,ImportBANK2},
    data() {
        return {
            listQuery: {
              pageNum: 1,
              pageSize: 10,
                areaId: "",
                deptId: "",
              querytime: null,
              type:null,
            },
            areaList: [],
            houseAdminList: [],
            tableData: [
            //     {
            //     id: 1,
            //     name: '管理部(分中心)财务与经营总数核对'
            // },
              {
                id: 2,
                name: '管理部(分中心)财务划转与经营支票同城划款核对'
            },
              {
                id: 3,
                name: '管理部(分中心)财务与经营现金核对'
            },
            //   {
            //     id: 4,
            //     name: '管理部(分中心)财务与经营退租核对'
            // },
              {
                id: 5,
                name: '管理部(分中心)财务与经营代收核对'
            },
              {
                id: 6,
                name: '管理部(分中心)财务与经营POS核对'
            },
              {
                id: 7,
                name: '管理部(分中心)财务与经营【微信】核对'
            },
            ],
          multipleSelection:null,
          showduizhang:false,
          orderlist:[],
          loading1:false,
          showpos:false,
          showwx:false,
          showbank1:false,
          showbank2:false,
        };
    },

    computed: {
        getTime() {
            return (val) => {
                if (val) {
                    return moment(val).format("YYYY")
                } else {
                    return ""
                }
            }
        }
    },

    mounted() {
        this.getCommon();
        // this.getList();
    },

    methods: {
        getCommon() {
            getArea().then(res => {
                this.areaList = res.data
            })
        },

        handleQuchange(val) {
            // this.listQuery.houseAdminId = null;
            if (val) {
                this.getHouseAdmin(val);

            } else {
                this.houseAdminList = [];
            }
        },


        getHouseAdmin(val) {
            getHouseAdmin({ DID: val, pageNum: 1, pageSize: 100000 }).then(res => {
                this.houseAdminList = res.data.list;
            })
        },
        handleSelectionChange(selection) {
          if (selection.length > 1) {
            this.$refs.multipleTable.clearSelection()
            this.$refs.multipleTable.toggleRowSelection(selection[selection.length-1])
          }
          this.multipleSelection = selection[selection.length-1];
             console.log(this.multipleSelection.id)
          this.listQuery.type=this.multipleSelection.id
          this.handleSearch();
        },
        handleSearch() {
            // this.listQuery.pageNum = 1;
            this.getList();
        },
        getList() {
          listCwCredentialsLog2(this.listQuery).then((response) => {
                this.orderlist = response.data.list;
                this.total = response.data.total;
            });
        },

      checkorderlist(){
          if(this.multipleSelection==null){
            Message({
              message:  '请选择对账项目!',
              type: "warning",
              duration: 3 * 1000,
            });
          }else {
            this.showduizhang=true
          }

      },
      showdata1(){
          this.showpos=true
      },
      showdata2(){
          this.showwx=true
      },
      showdata3(){
          this.showbank1=true
      },
      showdata4(){
        this.showbank2=true
      },
    },
};
</script>

<style scoped>
.el-date-editor.el-input {
    width: 100%;
    cursor: pointer;
}

/* 上传组件标准样式 */
.upload-container {
    padding: 20px 0;
    width: 100%;
}

.upload-dragger {
    width: 100% !important;
}

.upload-dragger .el-upload {
    width: 100% !important;
}

.upload-dragger .el-upload-dragger {
    width: 100% !important;
    height: 200px;
    border: 2px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s ease;
    background-color: #fafafa;
    box-sizing: border-box;
}

.upload-dragger .el-upload-dragger:hover {
    border-color: #409EFF;
    width: 100%;
}

.upload-dragger .el-upload-dragger .el-icon-upload {
    font-size: 67px;
    color: #C0C4CC;
    margin: 40px 0 16px;
    line-height: 50px;
    width: 100%;
}

.upload-dragger .el-upload__text {
    color: #606266;
    font-size: 14px;
    text-align: center;
}

.upload-dragger .el-upload__text em {
    color: #409EFF;
    font-style: normal;
}

.template-download {
    margin-top: 15px;
    font-size: 14px;
    color: #606266;
}

.template-download .el-button--text {
    color: #409EFF;
    padding: 0;
    font-size: 14px;
}

::v-deep .el-upload {
    width: 100% !important;
}

::v-deep .el-upload-dragger {
    width: 100% !important;
}

/* 附件查看弹窗样式 */
.attachment-view {
    padding: 20px;
    min-height: 200px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 24px;
    justify-items: center;
}

.attachment-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 120px;
}

.file-icon {
    width: 80px;
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    position: relative;
    cursor: pointer;
    transition: transform 0.2s;
}

.file-icon:hover {
    transform: scale(1.05);
}

/* 具体文件类型样式 */
.file-pdf {
    background: #EF4A37;
}

.pdf-lines {
    width: 48px;
    height: 36px;
    position: relative;
    margin-bottom: 8px;
}

.pdf-lines::before,
.pdf-lines::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: white;
    border-radius: 1px;
}

.pdf-lines::before {
    top: 8px;
}

.pdf-lines::after {
    top: 16px;
}

.pdf-lines>span {
    position: absolute;
    top: 24px;
    left: 0;
    right: 0;
    height: 3px;
    background: white;
    border-radius: 1px;
}

.file-word {
    background: #2B579A;
}

.word-icon {
    font-size: 32px;
    color: white;
    font-weight: bold;
    margin-bottom: 8px;
}

.file-excel {
    background: #217346;
}

.excel-icon {
    font-size: 32px;
    color: white;
    font-weight: bold;
    margin-bottom: 8px;
}

.file-image {
    background: #FF6B35;
}

.file-default {
    background: #909399;
}

.default-icon {
    font-size: 24px;
    color: white;
    font-weight: bold;
    margin-bottom: 8px;
}

.file-text {
    color: white;
    font-size: 12px;
    font-weight: bold;
    font-family: Arial, sans-serif;
}

.file-name {
    font-size: 12px;
    color: #606266;
    font-weight: 500;
    text-align: center;
    line-height: 1.4;
    word-break: break-all;
    max-width: 100%;
}

/* 表单样式 */
.section-title {
    font-size: 16px;
    font-weight: bold;
    color: #20B2AA;
    margin: 20px 0 15px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #20B2AA;
}

.file-list-item {
    margin: 5px 0;
}

.file-list-item .el-button--text {
    color: #409EFF;
    padding: 0;
    font-size: 14px;
}

/* 文件预览样式 */
.file-preview-content {
    padding: 20px;
    text-align: center;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.image-preview {
    text-align: center;
}

.file-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.file-icon-large {
    width: 120px;
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    position: relative;
    transition: transform 0.2s;
}

.file-icon-large:hover {
    transform: scale(1.05);
}

/* 大尺寸文件图标样式 */
.file-icon-large.file-pdf {
    background: #EF4A37;
}

.file-icon-large .pdf-lines {
    width: 72px;
    height: 54px;
    position: relative;
    margin-bottom: 12px;
}

.file-icon-large .pdf-lines::before,
.file-icon-large .pdf-lines::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    background: white;
    border-radius: 2px;
}

.file-icon-large .pdf-lines::before {
    top: 12px;
}

.file-icon-large .pdf-lines::after {
    top: 24px;
}

.file-icon-large .pdf-lines>span {
    position: absolute;
    top: 36px;
    left: 0;
    right: 0;
    height: 4px;
    background: white;
    border-radius: 2px;
}

.file-icon-large.file-word {
    background: #2B579A;
}

.file-icon-large .word-icon {
    font-size: 48px;
    color: white;
    font-weight: bold;
    margin-bottom: 12px;
}

.file-icon-large.file-excel {
    background: #217346;
}

.file-icon-large .excel-icon {
    font-size: 48px;
    color: white;
    font-weight: bold;
    margin-bottom: 12px;
}

.file-icon-large.file-image {
    background: #FF6B35;
}

.file-icon-large.file-default {
    background: #909399;
}

.file-icon-large .default-icon {
    font-size: 36px;
    color: white;
    font-weight: bold;
    margin-bottom: 12px;
}

.file-icon-large .file-text {
    color: white;
    font-size: 16px;
    font-weight: bold;
    font-family: Arial, sans-serif;
}

.file-name-large {
    font-size: 16px;
    color: #303133;
    font-weight: 500;
    text-align: center;
    line-height: 1.4;
    word-break: break-all;
    max-width: 400px;
}

.file-size {
    font-size: 14px;
    color: #909399;
    font-weight: normal;
}

.report-top {
    display: flex;
    align-items: center;

    .el-date-editor.el-input {
        width: 200px;
    }

    span {
        color: #333333;
        margin-right: 10px;
    }

    .el-button {
        margin-left: 10px;
    }
}

.report-table {
    margin-top: 20px;

}
</style>
